<template>
  <div>
    <h2>TsList</h2>

    {{ cnGender }} - {{ enGender }}

    <hr>
    {{ add(10) }}

    <hr>

    <input type="text" v-focus>

  </div>
</template>
<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  mixins: [
    // 累加和
    {
      data() {
        return {
          count: 100,
        };
      },
      methods: {
        add(x) {
          return x + this.count;
        }
      }
    },
    // 性别本地化
    {
      data() {
        return {
          gender: 1,
        };
      },
      computed: {
        cnGender() {
          const g = { 1: '男', 2: '女' };
          return g[this.gender];
        },
        enGender() {
          const g = { 1: 'boy', 2: 'gril' };
          return g[this.gender];
        }
      }
    },

  ],

  data() {
    return {
      // count: 1000
    };
  },
  computed: {},
  methods: {}
};
</script>